<template>
	<view>
		<uni-nav-bar left-icon="arrowleft" right-text="清空" title="订单搜索" @clickLeft="back" @clickRight="remove" :fixed="true" class="top"></uni-nav-bar>
		<view class="ul qf">
			<view class="li">
				<text>姓名</text>
				：
				<input type="text" value="" placeholder="请输入客户信息" v-model="userInformation"/>
			</view>
			<view class="li">
				<text>订单号</text>
				：
				<input type="text" value="" placeholder="请输入订单号" v-model="orderSn" />
			</view>
			<view class="li">
				<text>货号</text>
				：
				<input type="text" value="" placeholder="请输入货号" v-model="goodsSn" />
			</view>
			<view class="li">
				<text>订单状态</text>
				：
				<picker @change="bindDateChange" :value="indexstatus" :range="orderstatusarray"  range-key="desp">
					<view class="uni-input" v-if="orderstatusarray.length!=0">{{ orderstatusarray[index].desp }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>开始时间</text>
				：
				<picker mode="date" :value="date1" start="2000-01-01" :end="endDate" @change="bindDateChange1">
					<view class="uni-input" v-show="date1">{{ date1 }}</view>
					<view class="uni-placeholder" v-show="!date1">请选择开始时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>结束时间</text>
				：
				<picker mode="date" :value="date2" start="2000-01-01" :end="endDate" @change="bindDateChange2">
					<view class="uni-input" v-show="date2">{{ date2 }}</view>
					<view class="uni-placeholder" v-show="!date2">请选择结束时间</view>
				</picker>
				<image src="/static/img/calendar.png" class="time"></image>
			</view>
			<view class="li">
				<text>活动来源</text>
				：
				<picker @change="bindPickerChangetype" :value="index" :range="activitytypearray" range-key="desp">
					<view class="uni-input"  v-if="activitytypearray.length!=0">{{ activitytypearray[index].desp}}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			<view class="li">
				<text>活动名称</text>
				：
				<picker @change="bindPickerChangename" :value="indexname" :range="activityarraytmp"  range-key="actName">
					<view class="uni-input" v-if="activityarraytmp.length!=0">{{ activityarraytmp[indexname].actName }}</view>
				</picker>
				<uni-icons type="arrowdown" size="30rpx" color="#9b9b9b" class="uni-arrowdown" />
			</view>
			
		</view>
		<view class="button" @click="find">搜 索</view>
	</view>
</template>

<script>
import { uniNavBar, uniIcons, uniPopup } from '@dcloudio/uni-ui';
import shipments from '../../servers/shipments/shipments.js';
import jsonUtil from '../../common/jsonUtil.js';
export default {
	components: { uniNavBar, uniIcons, uniPopup },
/* 	inject:['reload'], */
	data() {
		return {
			array: ['中国', '美国', '巴西', '日本'],
			orderstatusarray: [],
			activityarray: [],
			activityarraytmp:[],
			activitytypearray: [],
			index: 0,
			indexname:0,
			indexstatus:0,
			orderstatus:'',/* 订单状态 */
			activitytype:'',/* 订单活动来源类型 */
			activitid:'',/* 活动id */
			date1: null,
			date2:null,
			endDate: null,
			goodsName:'',
			startTime:'',
			endTime:'',
			userInformation:'',
			orderSn:'',
			goodsSn:''			
		};
	},
	mounted() {
		this.endDate = this._endDate();
		this.getData();
			
			
	},
	methods: {
		getData(){
			console.log(1231232112)
			shipments.activity()
				.then(res => {
					var isda=[]
					this.activityarray = res.data.data.records
					for(var i=0;i<this.activityarray.length;i++){
						if(this.activityarray[i].actType==res.data.type[0].value){
							this.activityarraytmp.push(this.activityarray[i])
						}
					}
					this.activitytypearray=res.data.type;
			        this.activitytype=this.activitytypearray[0].value;/* 订单活动来源类型 */
				    this.activitid=this.activityarray[0].id;/* 活动id */
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
				shipments.orderStatus()
					.then(res => {
						   this.orderstatusarray=res.data;   
							this.orderstatus=this.orderstatusarray[0].value;/* 订单状态 */
					})
					.catch(err => {
						console.log(new Error('请检查网络后重试'));
					});
		},
		bindPickerChangetype(e) {
			this.activityarraytmp=[];/* 置空 */
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
			this.activitytype=this.activitytypearray[this.index].value;/* 活动类型ID */
			var type=this.activitytypearray[this.index].value;
			for(var i=0;i<this.activityarray.length;i++ ){
				var tmp=this.activityarray[i];
				console.log(type==tmp.actType)
				if(type==tmp.actType){
					this.activityarraytmp.push(tmp);
				}
			}
			console.log(this.activityarraytmp.length)
		},
		bindPickerChangename(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.activitid=this.activityarray[e.target.value].id/* 活动id */
			
		},
		bindDateChange(e) {
			this.orderstatus=this.orderstatus[e.target.value].value;
		},
		bindDateChange1(e){
			this.startTime=e.target.value;
			this.date1=e.target.value;
		},
		bindDateChange2(e){
			
			if(e.target.value<this.startTime){
				uni.showToast({
				    title: '请选择开始时间小于结束时间',
				    duration: 2000,
					complete() {
						return
					}
				});
			}else{
				this.endTime=e.target.value;
				this.date2=e.target.value;
			}
			
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		remove() {
			console.log('清空');
			this.reload();
		},
		open() {
			// 需要在 popup 组件，指定 ref 为 popup
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		},
		_endDate() {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			return year + '-' + month + '-' + day;
		},
		find(){
			var obj1=JSON.stringify(this.coverData());
			jsonUtil.deleteEmptyProperty(obj1);
			
			uni.navigateTo({
			    url: './unfinished?obj='+obj1
			});
		},
		/* 数据封装 */
		coverData(){
			var obj=new Object();
			obj.goodsName=this.goodsName;
			obj.orderStatus=this.orderStatus;
			obj.startTime=this.startTime;
			obj.endTime=this.endTime;
			obj.userInformation=this.userInformation;
			obj.actId=this.activitid;
			obj.goodsSn=this.goodsSn;
			obj.orderSn=this.orderSn;
			return obj;
		}
	}
};
</script>

<style lang="less" scoped>
.qf {
	padding: 0 20rpx;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		text {
			font-size: 28rpx;
			width: 130rpx;
			text-align-last: justify;
		}
		input,
		picker {
			font-size: 26rpx;
			width: 557rpx;
			height: 90rpx;
			line-height: 90rpx;
			border: 1px solid #e1e1e1;
			border-radius: 10rpx;
			padding: 0 27rpx;
			box-sizing: border-box;
			margin: 15rpx 0;
			background: #ffffff;
			.uni-placeholder {
				color: #999999;
			}
		}
		.find,
		.uni-arrowdown,
		.time {
			position: absolute;
			right: 0;
			top: 15rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
		}
		.find {
			width: 121rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: #bd3c8c;
			border-bottom-right-radius: 10rpx;
			border-top-right-radius: 10rpx;
		}
		.uni-arrowdown {
			width: 50rpx;
			pointer-events: none;
		}
		.time {
			top: 40rpx;
			right: 20rpx;
			width: 36rpx;
			height: 34rpx;
			pointer-events: none;
		}
	}
}
.button {
	height: 90rpx;
	line-height: 90rpx;
	margin: 30rpx 20rpx;
	text-align: center;
	color: #ffffff;
	border-radius: 50px;
	font-size: 32rpx;
	background: linear-gradient(90deg, #d2158a, #fc6395);
}
.structure {
	width: 80vw;
	max-height: 60vh;
	margin: 0 auto;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 20rpx;
	.ul {
		padding-bottom: 100rpx;
		.li {
			line-height: 123rpx;
			.msg {
				font-size: 30rpx;
				padding: 0 20rpx 0 110rpx;
				border-bottom: 1px solid #e1e1e1;
				image {
					width: 26rpx;
					height: 22rpx;
					margin-right: 26rpx;
					transform: rotate(-90deg);
				}
				image.avtive {
					transform: rotate(0deg);
				}
				.name {
					margin-right: 30rpx;
				}
				.isname {
					color: #bd3c8c;
				}
			}
			.sublevel {
				padding: 0 20rpx 0 70rpx;
			}
		}
	}
	.choice {
		position: absolute;
		bottom: 0rpx;
		width: 100%;
		line-height: 88rpx;
		background: #bd3c8c;
		color: #fff;
		text-align: center;
		font-size: 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}
}
</style>
